<template>
  <div class="personal-info">
    <el-card class="box-card">
      <div slot="header" class="title">
        管理员个人信息表
      </div>
      <el-form :model="admin" label-width="0" class="custom-form" v-if="Object.keys(admin).length > 0">
        <el-form-item class="form-item">
          <div class="form-row">
            <span class="form-label">用户名</span>
            <span class="form-value">{{ admin.username }}</span>
          </div>
        </el-form-item>
        <el-form-item class="form-item">
          <div class="form-row">
            <span class="form-label">密码</span>
            <span class="form-value">{{ admin.password }}</span>
          </div>
        </el-form-item>
        <el-form-item class="form-item">
          <div class="form-row">
            <span class="form-label">姓名</span>
            <span class="form-value">{{ admin.name }}</span>
          </div>
        </el-form-item>
        <el-form-item class="form-item">
          <div class="form-row">
            <span class="form-label">性别</span>
            <span class="form-value">{{ admin.gender }}</span>
          </div>
        </el-form-item>
        <el-form-item class="form-item">
          <div class="form-row">
            <span class="form-label">年龄</span>
            <span class="form-value">{{ admin.age }}</span>
          </div>
        </el-form-item>
        <el-form-item class="form-item">
          <div class="form-row">
            <span class="form-label">手机号码</span>
            <span class="form-value">{{ admin.phonenumber }}</span>
          </div>
        </el-form-item>
        <el-button type="primary" @click="openEditDialog">编辑</el-button>
      </el-form>
      <div v-else class="loading">
        <p>Loading...</p>
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑管理员信息" v-model="editDialogVisible">
      <el-form :model="editAdmin" label-width="80px">
        <el-form-item label="密码">
          <el-input v-model="editAdmin.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editAdmin.name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="editAdmin.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
        <el-input v-model="editAdmin.age"></el-input>
      </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="editAdmin.phonenumber"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateAdminInfo">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';

export default {
  name: 'PersonalInfo',
  setup() {
    const admin = ref({});
    const editAdmin = ref({});
    const editDialogVisible = ref(false);
    const route = useRoute();
    const username = route.query.username; // 获取路由参数中的 username

    const openEditDialog = () => {
      editAdmin.value = { ...admin.value };
      editDialogVisible.value = true;
    };

    const updateAdminInfo = async () => {
      try {
        const response = await axios.put(`http://localhost:8080/Admin/${admin.value.id}`, editAdmin.value);
        if (response.status === 200) {
          admin.value = { ...editAdmin.value };
          editDialogVisible.value = false;
          console.log("Admin info updated successfully");
        } else {
          console.error('Failed to update admin data:', response.data.message);
        }
      } catch (error) {
        console.error('Error updating admin data:', error);
      }
    };

    onMounted(async () => {
      try {
        const response = await axios.get(`http://localhost:8080/Admin/info/${username}`);
        if (response.status === 200) {
          admin.value = response.data.data; // 假设后端返回数据格式是 { data: { username: '...', gender: '...' } }
          console.log("Admin data fetched successfully", admin.value);
        } else {
          console.error('Failed to fetch admin data:', response.data.message);
        }
      } catch (error) {
        console.error('Error fetching admin data:', error);
      }
    });

    return {
      admin,
      editAdmin,
      editDialogVisible,
      openEditDialog,
      updateAdminInfo
    };
  }
};
</script>

<style scoped>
.personal-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.box-card {
  width: 600px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border: 1px solid #dcdcdc; /* 添加边框样式 */
}

.title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.custom-form .el-form-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 0; /* 调整表单项的上下间距 */
}

.form-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #dcdcdc; /* 添加行之间的边框 */
  padding: 10px 0; /* 调整行的上下间距 */
}

.form-label {
  font-size: 18px;
  font-weight: bold;
  color: #666;
  width: 150px; /* 调整标签的宽度 */
  text-align: center;
  margin-right: 220px; /* 调整标签与值之间的间距 */
}

.form-value {
  font-size: 18px;
  color: #333;
  flex: 1;
}

.loading {
  text-align: center;
  padding: 15px;
  font-size: 18px;
  color: #999;
}
</style>
